<div class="layui-form" lay-filter="layuiadmin-form-role" id="form">
	<div class="form-cont">
		<div class="layui-form-item verify" v-if="type!=2">
		  <label class="layui-form-label">模块类型</label>
		  <div class="layui-input-block">
			  <div class="layui-unselect layui-form-select">
			  	<div class="layui-select-title"><input type="text" verify='require' placeholder="请选择模块类型" class="layui-input layui-unselect" readonly><i
			  		 class="layui-edge"></i></div>
			  	<dl class="layui-anim layui-anim-upbit">
			  		<dd class="layui-select-tips layui-this">请选择</dd>
			  		<dd :data='index' v-for="(x,index) in typec" @click="typeF(index)">{{x}}</dd>
			  	</dl>
			  </div>
			  <span class="hint">模块类型必选</span>
			</div>
		</div>
		<div class="layui-form-item verify" v-if="mtype==1">
		  <label class="layui-form-label">菜单图标</label>
		  <div class="layui-input-block">
			  <input type="text" lay-verify="required" autocomplete="off" verify='require' v-model="detail.icon" placeholder="请输入菜单图标" class="layui-input">
			  <span class="hint">菜单图标必填</span>
			</div>
		</div>
		<template v-if="mtype==3||mtype==2">
			<div class="layui-form-item verify" v-if="type!=2||mtype==2">
			  <label class="layui-form-label">所属一级菜单</label>
			  <div class="layui-input-block">
				  <div class="layui-unselect layui-form-select">
				  	<div class="layui-select-title"><input type="text" name='firstM' verify='require' placeholder="请选择一级菜单" class="layui-input layui-unselect" readonly><i
				  		 class="layui-edge"></i></div>
				  	<dl class="layui-anim layui-anim-upbit">
				  		<dd class="layui-select-tips layui-this">请选择</dd>
				  		<dd data='0' v-for="(x,index) in module" @click="indexs=index">{{x.module_name}}</dd>
				  	</dl>
				  </div>
				  <span class="hint">一级菜单必选</span>
				</div>
			</div>
			<div class="layui-form-item verify" v-if="mtype==3&&indexs!==''">
			  <label class="layui-form-label">所属二级菜单</label>
			  <div class="layui-input-block">
				  <div class="layui-unselect layui-form-select">
				  	<div class="layui-select-title"><input type="text" verify='require' placeholder="请选择二级菜单" class="layui-input layui-unselect" readonly><i
				  		 class="layui-edge"></i></div>
				  	<dl class="layui-anim layui-anim-upbit">
				  		<dd class="layui-select-tips layui-this">请选择</dd>
				  		<dd data='0' v-for="(x,index) in module[indexs].children" @click="indexe=index">{{x.module_name}}</dd>
				  	</dl>
				  </div>
				  <span class="hint">二级菜单必选</span>
				</div>
			</div>
		</template>
		<template v-if="mtype==3">
			<div class="layui-form-item verify" v-if="mtype==3&&type==1">
			  <label class="layui-form-label">权限类型</label>
			  <div class="layui-input-block">
				  <div class="layui-unselect layui-form-select">
				  	<div class="layui-select-title"><input type="text" name='type' verify='require' placeholder="请选择权限类型" class="layui-input layui-unselect" readonly><i
				  		 class="layui-edge"></i></div>
				  	<dl class="layui-anim layui-anim-upbit">
				  		<dd class="layui-select-tips layui-this">请选择</dd>
				  		<dd data='1'>新增</dd>
						<dd data='2'>删除</dd>
						<dd data='3'>修改</dd>
						<dd data='4'>列表</dd>
				  	</dl>
				  </div>
				  <span class="hint">权限类型必选</span>
				</div>
			</div>
			<div class="layui-form-item verify">
			  <label class="layui-form-label">后端控制器</label>
			  <div class="layui-input-block">
				  <input type="text" lay-verify="required" autocomplete="off" verify='require' v-model="detail.urls" placeholder="请输入后端控制器" class="layui-input">
				  <span class="hint">后端控制器必填</span>
				</div>
			</div>
		</template>
		<template v-else-if="mtype==2||mtype==1">
			<div class="layui-form-item verify">
			  <label class="layui-form-label">菜单名称</label>
			  <div class="layui-input-block">
				  <input type="text" lay-verify="required" autocomplete="off" verify='require' v-model="detail.module_name" placeholder="请输入菜单名称" class="layui-input">
				  <span class="hint">菜单名称必填</span>
				</div>
			</div>
			<div class="layui-form-item verify" v-if="mtype==2">
			  <label class="layui-form-label">前端路由</label>
			  <div class="layui-input-block">
				  <input type="text" lay-verify="required" autocomplete="off" verify='require' v-model="detail.route" placeholder="请输入前端路由" class="layui-input">
				  <span class="hint">前端路由必填</span>
				</div>
			</div>
			<div class="layui-form-item verify" v-if="mtype==2">
			  <label class="layui-form-label">后端控制器</label>
			  <div class="layui-input-block">
				  <input type="text" lay-verify="required" autocomplete="off" verify='require' v-model="detail.urls" placeholder="请输入后端控制器" class="layui-input">
				  <span class="hint">后端控制器必填</span>
				</div>
			</div>
			<div class="layui-form-item">
			  <label class="layui-form-label">排序</label>
			  <div class="layui-input-block">
				  <input type="number" autocomplete="off" v-model="detail.sort" placeholder="请输入排序大小" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
			  <label class="layui-form-label">是否显示</label>
			  <div class="layui-input-block">
			      <div class="layui-unselect layui-form-switch" :class="{'layui-form-onswitch':detail.is_display==1}" lay-skin="_switch" @click="radioF()"><em>{{detail.is_display==1?'是':'否'}}</em><i></i></div>
			  </div>
			</div>
		</template>
	</div>
  
  <div class="form-btn" v-if="type!=3">
      <input type="button" value="保存" class="layui-btn" @click="submit">
  </div>
</div>
<style type="text/css">
	#form .layui-form-label{
		width:90px;
	}
	#form .layui-input-block{
		margin-left: 120px;
	}
</style>
<script>
	layui.use(['form'], function(){
	  var $ = layui.$
	  ,form = layui.form;
	  var form=new Vue({
	  		el:'#form',
	  		data:{
	  			detail:{
					is_display:1
				},
				old_detail:{},
				type:layui.admin.objData.type,
				mtype:0,
				module:layui.admin.module,
				typec:['一级菜单','二级菜单','菜单权限'],
				indexs:'',
				indexe:''
	  		},
	  		mounted:function(){
				//初始化
				var _this=this;
	  			if(this.type!=1) this.detail=layui.admin.objData.detail,this.old_detail=JSON.stringify(layui.admin.objData.detail);
				if(this.detail.level)this.mtype=this.detail.level;
				if(this.type==2){
					for(var i=0; i<this.module.length; i++){
						if(this.detail.pid==this.module[i].module_id){
							var name=this.module[i].module_name;
							setTimeout(function(){
								$('input[name="firstM"]').val(name);	
							},10);
							this.indexs=i;
						}
					}
				}
	  		},
	  		methods:{
				radioF(){//radio选择
					this.detail.is_display==1?this.detail.is_display=0:this.detail.is_display=1;
				},
				submit(){
					if(layui.admin.form('#form')){
						if(this.mtype==1){
							this.detail.pid=0;
							this.detail.urls='/';
						}else if(this.mtype==2){
							this.detail.pid=this.module[this.indexs].module_id;
						}else if(this.mtype==3&&this.type==1){
							this.detail.pid=this.module[this.indexs].children[this.indexe].module_id;
							this.detail.module_name=$('input[name="type"]').val();
						}
						this.detail.level=this.mtype;
						if(this.type==2){   //编辑
							var data=layui.admin.filter(this.detail,JSON.parse(this.old_detail),'module_id');
							if(data){
								layui.admin.ajax('menu/update',data).then(function(res){
									layer.close(layui.admin.pupFv);
									layui.view.tab.refresh('/system/moudle');
								});
							}
						}else{  //添加
							layui.admin.ajax('menu/add',this.detail).then(function(res){
								layer.close(layui.admin.pupFv);
								layui.view.tab.refresh('/system/moudle');
							});
						}
					}
				},
				typeF:function(index){
					this.mtype=index+1;
				}
	  		}
	  	})
	});
</script>
